import React, { Component } from 'react';
import CarLoggedAndEmpty from "./CarLoggedAndEmpty";
import styled from "./Car.module.scss";
import { Toast, Modal, WhiteSpace, WingBlank, Button } from 'antd-mobile';

const alert = Modal.alert;

export default class Car extends Component {

    state = {
        totalPice: 0,//总计价格
        benefitsPice: 0,//优惠价格
        selectedGoodsTotal: 0,//底部已选商品数
        totalChecked: false,//底部checked状态
        isEdit: false,//点击编辑改变底部状态
        isEmptyCar: false,//判断购物车是否有商品
        placeOrderState: false, //购物城商品如果有被选中的，为true，否则false
        goodsData: [{
            title: "多功能私享按摩椅",
            goods_id: 1343334035,
            pic: "https://yanxuan-item.nosdn.127.net/c238c40ce43643b3f73dc44ea08aa616.png",
            preSellPrice: 2299,
            specList: [{ specName: "颜色", specValue: "白色+咖啡色" }],
            goodsNum: 1,
            selectState: false
        }, {
            title: "智能前驱椭圆机",
            goods_id: 1343242061,
            pic: "https://yanxuan-item.nosdn.127.net/6aff6f74c39cf26153c98a4f580840da.png",
            preSellPrice: 3299,
            specList: [{ specName: "规格", specValue: "前驱" }],
            goodsNum: 2,
            selectState: true
        }, {
            title: "女式纯棉条纹居家套装",
            goods_id: 1343242081,
            pic: "https://yanxuan-item.nosdn.127.net/7920b2d4e46c41300a6f019a2ab92a56.png",
            preSellPrice: 169,
            specList: [{ specName: "颜色", specValue: "浅杏白条" }, { specName: "尺码", specValue: "XL" }],
            goodsNum: 4,
            selectState: false
        }, {
            title: "多功能私享按摩椅",
            goods_id: 133334035,
            pic: "https://yanxuan-item.nosdn.127.net/c238c40ce43643b3f73dc44ea08aa616.png",
            preSellPrice: 2299,
            specList: [{ specName: "颜色", specValue: "白色+咖啡色" }],
            goodsNum: 1,
            selectState: false
        }, {
            title: "智能前驱椭圆机",
            goods_id: 134324201,
            pic: "https://yanxuan-item.nosdn.127.net/6aff6f74c39cf26153c98a4f580840da.png",
            preSellPrice: 3299,
            specList: [{ specName: "规格", specValue: "前驱" }],
            goodsNum: 2,
            selectState: true
        }, {
            title: "女式纯棉条纹居家套装",
            goods_id: 134322081,
            pic: "https://yanxuan-item.nosdn.127.net/7920b2d4e46c41300a6f019a2ab92a56.png",
            preSellPrice: 169,
            specList: [{ specName: "颜色", specValue: "浅杏白条" }, { specName: "尺码", specValue: "XL" }],
            goodsNum: 4,
            selectState: false
        }]
    }

    //   http://s.linweiqin.com/api/s/createUser?mobile=13237666961&username=lizhencui&123456&code=848809

    showToast = () => {
        Toast.info('本商品一件起售', 1);
    }
    /* 加减按钮 */
    addAndSub = (index, type) => {
        let newGoodsData = JSON.parse(JSON.stringify(this.state.goodsData))
        let newNum = 1;
        // console.log(type, newGoodsData[index].goodsNum)
        if (type === "add") {
            newNum = newGoodsData[index].goodsNum + 1;
        } else {
            if (newGoodsData[index].goodsNum === 1) {
                this.showToast()
            } else {
                newNum = newGoodsData[index].goodsNum - 1;
            }
        }
        newGoodsData[index].goodsNum = newNum;
        this.totalPice(newGoodsData);
        this.setState({
            goodsData: newGoodsData
        })
    }
    /* 商品列表前的checked */
    handleClickSelected = (index) => {
        let newGoodsData = JSON.parse(JSON.stringify(this.state.goodsData));
        let selectState = newGoodsData[index].selectState ? false : true;
        newGoodsData[index].selectState = selectState;
        this.upAllSelectState(newGoodsData)
    }
    /* 底部总计那的checked */
    handleTotalSelected = () => {
        let newTotalChecked = this.state.totalChecked ? false : true;
        this.setAllSelectState(newTotalChecked);

    }
    /* 更新所有checked状态 */
    upAllSelectState = (params) => {
        let upGoodsTotalCount = 0;
        let newTotalChecked = false;
        let placeOrderactive = false;
        params.map((v) => {
            if (v.selectState) {
                upGoodsTotalCount++;
            }
        })
        if (upGoodsTotalCount === params.length) {
            newTotalChecked = true;
        } else {
            newTotalChecked = false;
        }
        if (upGoodsTotalCount > 0) {
            placeOrderactive = true;
        } else {
            placeOrderactive = false;
        }
        this.totalPice(params);
        this.setState({
            goodsData: params,
            totalChecked: newTotalChecked,
            selectedGoodsTotal: upGoodsTotalCount,
            placeOrderState: placeOrderactive
        })
    }
    /* 点击全选或全取消 */
    setAllSelectState = (params) => {
        let newGoodsData = JSON.parse(JSON.stringify(this.state.goodsData));
        newGoodsData.map((v) => {
            v.selectState = params;
        })
        this.totalPice(newGoodsData);
        this.setState({
            goodsData: newGoodsData,
            totalChecked: params,
            placeOrderState: params
        })
    }
    /* 点击编辑切换底部组件样式 */
    handleClickEdit = (params) => {
        let isEditState = this.state.isEdit ? false : true;
        this.setState({
            isEdit: isEditState,
        })
    }
    /* 总计价格 */
    totalPice = (params) => {
        let totalPiceNum = 0;
        params.map((v) => {
            if (v.selectState) {
                totalPiceNum += v.preSellPrice * v.goodsNum
            }
        })
        this.setState({
            totalPice: totalPiceNum,
        })
    }


    handleDeleteAll = () => {
        alert('删除所选商品', 'Are you 确定???', [
            { text: '取消', onPress: () => { Toast.info('亲~，非常明智哦', 1); } },
            {
                text: '嗯！',
                onPress: () => {
                    Toast.info('亲~，已成功删除哦', 1);
                    this.deleteAll();
                }

            },
        ])
    }
    /* 删除所有 */
    deleteAll = () => {
        let newGoodsData = JSON.parse(JSON.stringify(this.state.goodsData));
        let newGoodsDataNum = newGoodsData.length;
        for (let i = 0; i < newGoodsData.length; i++) {
            if (newGoodsData[i].selectState) {
                newGoodsData.splice(i, 1);
                i--;
                newGoodsDataNum--;
            }
        }
        this.totalPice(newGoodsData);
        this.isEmptyCar(newGoodsData);
        this.setState({
            goodsData: newGoodsData,
            selectedGoodsTotal: newGoodsDataNum
        })
    }
    /* 判断购物城是否有商品 */
    isEmptyCar = (params) => {
        let emptyCar = null;
        if (params.length === 0) {
            emptyCar = true;
        } else {
            emptyCar = false;
        }
        this.setState({
            isEmptyCar: emptyCar,
        })
    }

    /* 去逛逛 */
    jumpTowhere = (params) => {
        alert("去逛逛")
    }
    /* 下单 */
    toPlaceOrder = (params) => {
        this.props.history.push("/orderDetils?user_token=00000");
    }



    componentDidMount() {
        /* 初始化 */
        this.upAllSelectState(this.state.goodsData);
        this.totalPice(this.state.goodsData);
        this.isEmptyCar(this.state.goodsData);
    }

    render() {
        return (
            <div className="car">

                {
                    this.state.isEmptyCar ? <CarLoggedAndEmpty carStatus={this.state.isEmptyCar}></CarLoggedAndEmpty> : <div className={styled.shopCar}>
                        <div className={styled.header}>
                            <div>购物车</div>
                            <div>
                                <span className={styled.lingjuan}>领卷</span>
                                <span onClick={this.handleClickEdit}>{this.state.isEdit ? "完成" : "编辑"}</span>
                            </div>
                        </div>
                        <div className={styled.carConcent}>
                            <div className={styled.freeMail}>已满足免邮条件</div>
                            <div className={styled.lookAgain}>
                                <div>
                                    <span className={styled.span1}>全场换购</span>
                                    <span className={styled.span2}>已满100元享低至11.4源换购</span>
                                </div>
                                <div className={styled.lookLook} onClick={this.jumpTowhere}>再逛逛&gt;</div>
                            </div>


                            <div className={styled.goodsList}>
                                {
                                    this.state.goodsData.map((v, i) => {
                                        return (<div className={styled.goodsItme} key={i}>
                                            <div className={styled.checked}>
                                                <input type="checkbox" checked={v.selectState} onChange={this.handleClickSelected.bind(this, i)} />
                                            </div>
                                            <div className={styled.goodsImg}><img src={v.pic} alt="" /></div>
                                            <div className={styled.goodsContent}>
                                                <div className={styled.goodsTitle}>
                                                    <div className={styled.contentTitle}>{v.title}</div>
                                                    <div className={styled.specList}>
                                                        {
                                                            v.specList.map((val, ind) => {
                                                                return (<span className={styled.specListItme} key={ind}>{val.specValue};</span>)
                                                            })
                                                        }
                                                    </div>
                                                </div>

                                                <div className={styled.goodsNumAndPric}>
                                                    <div className={styled.goodsPric}>￥ {v.preSellPrice}</div>
                                                    <div className={styled.goodsNum}>
                                                        <span onClick={this.addAndSub.bind(this, i, "sub")}>-</span>
                                                        <span>{v.goodsNum}</span>
                                                        <span onClick={this.addAndSub.bind(this, i, "add")}>+</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>)
                                    })
                                }
                            </div>

                        </div>
                        {
                            this.state.isEdit ? <div className={styled.carBottom}>
                                <div className={styled.carBottomLeft}>
                                    <input type="checkbox" checked={this.state.totalChecked} onChange={this.handleTotalSelected} />
                                    <div className={styled.seleced}>已选(<span>{this.state.selectedGoodsTotal}</span>)</div>
                                </div>
                                <div className={styled.carBottomRigth}>

                                    <div className={this.state.placeOrderState ? styled.placeOrder + " " + styled.active : styled.placeOrder}
                                        onClick={this.handleDeleteAll}>删除所有</div>
                                </div>
                            </div> :

                                <div className={styled.carBottom}>
                                    <div className={styled.carBottomLeft}>
                                        <input type="checkbox" checked={this.state.totalChecked} onChange={this.handleTotalSelected} />
                                        <div className={styled.seleced}>已选(<span>{this.state.selectedGoodsTotal}</span>)</div>
                                    </div>
                                    <div className={styled.carBottomRigth}>
                                        <div className={styled.totalAndBenefits}>
                                            <div className={styled.total}>合计：￥<span>{this.state.totalPice}</span></div>
                                            <div className={styled.benefits}>已优惠：￥<span>000</span></div>
                                        </div>
                                        <div className={this.state.placeOrderState ? styled.placeOrder + " " + styled.active : styled.placeOrder}
                                            onClick={this.toPlaceOrder}>下单</div>
                                    </div>
                                </div>
                        }

                    </div>
                }
            </div>
        )
    }

}
